<template>
    <a-form id="formLogin" class="user-layout-login" ref="formLogin"
            :form="formLogin"
            @submit="handleSubmit" >
        <!-- 用户名 -->
        <a-form-item>
            <a-input size="large" type="text" placeholder="用户名" autocomplete="off"
                     v-decorator="[
                        'username',
                        {rules: [{ required: true, message: '请输入用户名' }]}
                    ]">
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 密码 -->
        <a-form-item>
            <a-input size="large" type="password" autocomplete="off" placeholder="密码"
                     v-decorator="[
                        'password',
                        {rules: [{ required: true, message: '请输入密码' }]}
                    ]">
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 其他选项 -->
        <!--<a-form-item>-->
            <!--<a-checkbox v-decorator="[ 'rememberMe' ]">自动登录</a-checkbox>-->
            <!--<router-link class="forge-password" style="float: right;" :to="{ path : '/500' }">忘记密码</router-link>-->
        <!--</a-form-item>-->
        <!-- 登陆按钮 -->
        <a-form-item style="margin-top:24px">
            <a-button size="large" type="primary" htmlType="submit" class="login-button">确定</a-button>
        </a-form-item>
    </a-form>
</template>

<script>
    import { login,getMeInfo } from '../../../apis/upms';
    export default {
        data() {
            return {
                formLogin : this.$form.createForm(this)
            };
        },
        methods :   {
            //  提交登录表单
            handleSubmit(e) {
                e.preventDefault();
                //  表单参数校验
                this.formLogin.validateFields((err, params) => {
                    if (!err) {
                        let $this = this;
                        //  发送认证请求
                        login(params)
                            .then(result => {
                                $this.$store.commit('setAccessToken',result.data['accessToken']);
                                //  获取用户信息
                                getMeInfo().then(result => $this.$store.commit('setMeInfo',result.data));

                                let callback = $this.$route.query['callback'];
                                if (callback){
                                    $this.$router.push({ path : callback }).then();
                                } else {
                                    $this.$router.push({ path : '/' }).then();
                                }
                            });
                    }
                });
            }
        }
    };
</script>

<style lang="less" scoped>
    #formLogin{
        min-width: 260px;
        width: 368px;
        margin: 0 auto;
    }
    .user-layout-login {
        label {
            font-size: 14px;
        }

        .getCaptcha {
            display: block;
            width: 100%;
            height: 40px;
        }

        .forge-password {
            font-size: 14px;
        }

        button.login-button {
            padding: 0 15px;
            font-size: 16px;
            height: 40px;
            width: 100%;
        }

        .user-login-other {
            text-align: left;
            margin-top: 24px;
            line-height: 22px;

            .item-icon {
                font-size: 24px;
                color: rgba(0, 0, 0, 0.2);
                margin-left: 16px;
                vertical-align: middle;
                cursor: pointer;
                transition: color 0.3s;

                &:hover {
                    color: #1890ff;
                }
            }

            .register {
                float: right;
            }
        }
    }
</style>
